<template>
  <a-modal
    title="新增"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visible="feeAddVisiable"
  >
    <a-form :form="form" @submit="handleSubmit" >
      <a-row>费率信息管理</a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="费率代码(自动生成)" v-bind="formItemLayout">
            <a-input
              :disabled="true"
              v-decorator="['feeCd']"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="费率名称" v-bind="formItemLayout">
            <a-input v-decorator="['feeName',
                { rules: [{ required: true, message: '不能为空', trigger: 'blur'  }] },]" /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="费率描述" v-bind="formItemLayout">
            <a-input  v-decorator="['feeDesc',
                { rules: [{ required: true, message: '不能为空', trigger: 'blur'  }] },]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="费率使用场景" v-bind="formItemLayout">
            <a-select
              v-decorator="[
                'feeScene',
                { rules: [{ required: true, message: '不能为空', trigger: 'blur'  }] },
              ]"
            >
              <a-select-option value="0">单日交易累计金额计费</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
     <fee-table-add ref="feeTableAdd"></fee-table-add>
      <fee-table ref="feeTable"></fee-table>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button style="margin-left: 0.8rem" @click="onClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading"
        >保存
      </a-button>
    </div>
  </a-modal>
</template>
<script>
import FeeTableAdd from "../feeTable/FeeTableAdd";
import FeeTable from "../feeTable/FeeTable";
const formItemLayout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 },
};
export default {
  name: "FeeAdd",
    components: { FeeTableAdd,FeeTable},
  props: {
    feeAddVisiable: {
      default: false,
    },
  },
  data() {
    return {
      instId:"",
      fee: {},
      feeInfoList: [],
      loading: false,
      roleData: [],
      formItemLayout,
      form: this.$form.createForm(this),
    };
  },

  methods: {
    reset() {
      this.loading = false;
      this.form.resetFields();
    },
    onClose() {
      this.reset();
      this.$emit("close");
    },
    setFormValues(instId){
      this.instId = instId;
    },
    handleSubmit() {
      this.form.validateFields((err) => {
        let isFlag = false;
        this.feeInfoList = this.$refs.feeTable.dataSource;
        if (!err && this.feeInfoList.length !== 0) {
          let obj = this.form.getFieldsValue();
          this.feeInfoList.forEach((item,index)  => {
            if(index !== 0){
              let preItem = this.feeInfoList[index - 1];
              if(preItem.pEndValue !== item.pStartValue){
                isFlag = true;
                return;
              }
            }
            if(index === this.feeInfoList.length - 1){
              if(item.pEndValue !== "99999999999999.99"){
                isFlag = true;
                return;
              }
            }
            Object.keys(obj).forEach((key) => {
              item[key] = obj[key];
            });
            item['instId'] = this.instId
          });
          if(isFlag){
            this.$message.error("请按照分段规则填写");
            return
          }
          this.$post('/admin/fee/feeInfo/edit', {
            feeInfoList:this.feeInfoList,
            optFlag:"add",
          }).then((r) => {
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      });
    },
    handleChange() {},

  },
};
</script>
